<template>
  <div class="list">
    <div class="teach">教师列表</div>
    <el-button type="primary" @click="batchhander">批量删除</el-button>
      <el-table
    ref="multipleTable"
    :data="myarr"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="60">
    </el-table-column>
    <el-table-column
      prop="userid"
      label="工号"
      width="120">
      <!-- 作用域插槽 template空标签 scope.row当前行数据 scope.row.date当前行的date -->
      <!-- <template slot-scope="scope">{{ scope.row.userid }}</template> -->
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="联系电话"
      width="160"
      >
    </el-table-column>
    <el-table-column
      prop="num"
      label="学生数量"
      width="120"
      >
    </el-table-column>
    <el-table-column
      prop="level"
      label="教师等级"
      width="120"
      >
    </el-table-column>
    <el-table-column
      prop="time"
      label="上次教学时间"
      width="200"
      >
    </el-table-column>
    <el-table-column
      label="禁用账户"
      width="130"
      >
      <template slot-scope="scope">
        <el-switch
        v-model="scope.row.stop"
        active-color="#ea1a41"
        inactive-color="#b5b5b5">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="info"
          @click="handleDelete(scope.row.userid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    
  </div>
</template>

<script>
import { deleteByIdApi,bachtDeleeApi } from '../../../api/homeApi'
import eventBus from '../../../utils/eventBus'
export default {
  props:['myarr'],
    data() {
      return {
        // tableData: [{
        //   userid: 1234567,
        //   username: '王小虎',
        //   tel: 17862897926,
        //   num:10,
        //   level:3,
        //   time:'2022-06-16 12:08',
        //   stop:true,//禁用账户
        // }],
        multipleSelection: []//就是双向绑定checkbox 集合数组
        
      }
    },
    mounted(){
      eventBus.$on('batchtranfer',this.bathDeletefun) //添加自定义事件
    },
    methods: {
      // toggleSelection(rows) {
      //   if (rows) {
      //     rows.forEach(row => {
      //       this.$refs.multipleTable.toggleRowSelection(row);
      //     });
      //   } else {
      //     this.$refs.multipleTable.clearSelection();
      //   }
      // },
      handleEdit(row){
         //把row行数据给 dialog弹框的form表单，兄弟组件除了bus通信，vuex也是，子-父-子
         this.$emit('opendialog',row)
      },
      batchhander(){
            eventBus.$emit('batchtranfer')
      },
      bathDeletefun(){ //批量删除
        console.log('批量');
        //获取选中的所欲id，发送请求给后端，后端逻辑处理，通知前端操作成功，前端刷新表格 
        // 多个id值如何传递后端，数组，一般传递对象比较多  
        // 把多个id 拼接成 , 分隔的字符串，然后传递对象过去
        var idArr = this.multipleSelection.map(item=>item.userid)
        var ids = idArr.join(',')
        bachtDeleeApi({ids:ids}).then(res=>{
          console.log('res',res);
          if(res.code == 200){
               this.$emit('resetTable')//刷新表格
           }
        })
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      },
      handleDelete(id){
        // 删除逻辑，发送请求把id传送给后端，后端删除逻辑，然后通知前端，前端刷新表格
        // 发送请求 传递id值
        //  console.log(id)
        deleteByIdApi({id:id}).then(res=>{
          console.log(res);
         
           if(res.code == 200){
               this.$emit('resetTable')//刷新表格
           }
        })
      }
    }
  }
</script>

<style lang="less">
    .list{
        margin-top: 20px;
        background-color: white;
        .teach{
        height: 52px;
        font-weight: bold;
        margin-left: 30px;
        line-height: 52px;        
        }
        .el-button--small{
        margin-left: 30px;
        }
    }
</style>